// ---------------------------------------------------------------------------
//  Color Picker/extensions: Saturation
// ---------------------------------------------------------------------------

    @size-saturation: 200px;

    &-saturation {
        @radius-border: 2px;

        width: @size-saturation; height: @size-saturation;
        cursor: crosshair;
        border: 1px solid #f2f2f2;
        border-radius: @radius-border;
        box-shadow: 0 0 1px rgba(0, 0, 0, .07);
        position: relative;

        &:after {
            content: '';
            border-radius: @radius-border - 1;
            box-shadow:
                inset 0 0 0 1px rgba(0, 0, 0, .07),
                inset 0 0 18px rgba(0, 0, 0, .2);
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0; }

    // -------------------------------------
    //  canvas
    // -------------------------------------
        &-canvas {
            width: 100%; height: 100%;
            border-radius: 1px; }

    // -------------------------------------
    //  controls
    // -------------------------------------
        &-control {
            width: 9px; height: 9px;
            margin-top: -5px; margin-left: -5px;
            border: 2px solid #fff;
            border-radius: 100%;
            box-shadow:
                inset 0 0 1px rgba(0, 0, 0, .3),
                0 0 1px rgba(0, 0, 0, .3),
                0 1px 1px rgba(0, 0, 0, .2);
            position: absolute;
            top: 50%; left: 50%;
            z-index: 1; }
    }
